<template>
  <el-form @submit.native.prevent class="search_senior" :class="{is_show: isShow}">
    <div class="search_list">
      <div class="search_item" v-for="item in searchConfig" :key="item.searchName">
        <template v-if="item.searchType === 'input'">
          <span class="search_label">{{item.label}}：</span>
          <el-input v-model.trim="searchData[item.searchName]"
                    :placeholder="'请输入' + item.label"
                    size="small"
                    class="search_wrapper"
                    clearable></el-input>
        </template>
        <template v-else-if="item.searchType === 'select'">
          <span class="search_label">{{item.label}}：</span>
          <el-select v-model="searchData[item.searchName]"
                     :class="{'select_multiple': item.searchMultiple}"
                     class="search_wrapper"
                     :multiple="item.searchMultiple"
                     :collapse-tags="item.searchMultiple"
                     :placeholder="'请选择' + item.label"
                     size="small">
            <el-option
              v-for="(item1, index) in item.selectList"
              :key="index"
              :label="item1.text || item1.label"
              :value="item1.id">
            </el-option>
          </el-select>
        </template>
        <template v-else-if="item.searchType === 'date'">
          <span class="search_label">{{item.label}}：</span>
          <el-date-picker
            v-model="searchData[item.searchName]"
            class="search_wrapper"
            type="daterange"
            size="small"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions">
          </el-date-picker>
        </template>
      </div>
    </div>
    <div class="mes_btn">
      <el-button native-type="submit" type="primary" @click="info">查询</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </el-form>
</template>

<script>
import dictConfig from './dictConfig'

export default {
  name: 'seniorSearch',
  props: {
    searchList: {
      // 搜索配置列表
      type: Array,
      required: true
    },
    isShow: {
      // 是否收起高级搜索
      type: Boolean,
      default: false
    }
  },
  computed: Object.assign({
    // 搜索项列表
    searchConfig() {
      return this.searchList.map(item => {
        item.searchName = item.searchName || item.prop || item.name
        item.searchMultiple = item.searchMultiple || item.multiple || false
        item.searchValue = item.searchValue || item.value
        item.searchDict = item.searchDict || item.dictType
        item.searchType = item.searchType || item.type
        if (item.searchMultiple === true && item.searchDict) {
          item.selectList = item.selectList || this[item.searchDict]
        } else if (item.searchDict) {
          item.selectList = item.selectList || this.addLabelAll(this[item.searchDict])
        }
        return item
      })
    }
  }, dictConfig),
  data() {
    return {
      // 搜索内容
      searchInfo: {},
      // 高级搜索的数据
      searchData: {},
      // 日期格式的快捷键配置项
      pickerOptions: this.$dateConfig.pickerOptions
    }
  },
  mounted() {
    this.initSearchData()
  },
  methods: {
    // 初始化searchData
    initSearchData() {
      this.searchConfig.forEach(item => {
        this.$set(this.searchData, item.searchName, item.searchValue)
      })
    },
    // 高级搜索查询
    info() {
      this.searchInfo = {}
      this.searchConfig.forEach(item => {
        if (this.searchData[item.searchName] && this.searchData[item.searchName].length > 0) {
          let searchItem = {
            searchName: item.searchName,
            searchValue: this.searchData[item.searchName],
            searchType: item.searchType,
            searchMultiple: item.searchMultiple
          }
          this.dataFormat(searchItem)
        }
      })
      this.$emit('seniorSearch', this.searchInfo)
    },
    // 数据格式化
    dataFormat(searchItem) {
      switch (searchItem.searchType) {
        case 'input':
          this.searchInfo[searchItem.searchName] = searchItem.searchValue
          break
        case 'select':
          if (searchItem.searchMultiple) {
            this.searchInfo[searchItem.searchName] = searchItem.searchValue.join(',')
          } else {
            this.searchInfo[searchItem.searchName] = searchItem.searchValue
          }
          break
        case 'date':
          let str2 = searchItem.searchName.slice(0, 1).toLocaleUpperCase() + searchItem.searchName.slice(1)
          this.searchInfo['begin' + str2] = searchItem.searchValue[0]
          this.searchInfo['end' + str2] = searchItem.searchValue[1]
          break
      }
    },
    // 重置搜索条件及数据
    reset() {
      this.initSearchData()
      this.$emit('seniorSearch', {})
    },
    // 清空所有搜索条件
    clean() {
      this.initSearchData()
    },
  }
}
</script>
<style lang="less">
  .search_senior{
    .el-input__inner {
      border-color: @mesSearchInputBorCol;
    }
    .el-range-editor.el-input__inner{
      padding: 3px 0px 3px 5px;
    }
  }
</style>
<style scoped lang="less">
  .search_senior {
    margin: 20px;
    font-size: 14px;
    padding: 5px 15px 15px;
    background-color: @mesSearchSeniorBg;
    border: @mesSearchSeniorBor;
    display: none;
    &.is_show {
      display: block;
    }
    .search_list {
      display: flex;
      flex-wrap: wrap;
    }
    .search_item {
      flex: 0 0 25%;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      padding-top: 10px;
      padding-right: 15px;
      box-sizing: border-box;
    }
    .search_label {
      flex: 0 0 100px;
    }
    .search_wrapper {
      flex: 1;
      width: 100%;
    }
    .search_more {
      margin-top: 10px;
      flex: 0 0 100px;
      justify-content: flex-end;
    }
    .mes_btn {
      margin-top: 20px;
      justify-content: center;
    }
  }
</style>
